<template>
  <div id="page-advertising">

    <!-- style -->
    <div v-html="css"></div>

    <div class="advertising-preview" :class="className">
      <!--<p>{{selected_vdc}}</p>-->
      <!-- 主要布局，中间，最小宽度 375x667 -->
      <div class="main-layout is-app" :class="{ 'is-empty': !selected_vdc.config.datas.advertising_image.value }">
        <div class="page-head">
          <img style="width: 100%" src="../../resource/images/state@2x.png" alt="">
        </div>
        <!-- 空信息 -->
        <div class="is-empty">
          <img :src="emptyImage">
          哎哟，您还没有放置图片哦~
        </div>

        <div class="pop" v-if="selected_vdc.config.datas.advertising_image.value">
          <div class="pop-image">
            <img :src="selected_vdc.config.datas.advertising_image.value">
            <div class="icon_close"><i class="iconfont icon-close11"></i></div>
          </div>
        </div>
      </div>

      <a-button type="primary" class="fix-class" @click="handle_save">保存</a-button>
    </div>

    <!-- 组件表单 -->
    <layout-form :selected_vdc="selected_vdc" />
  </div>
</template>

<script>
	import emptyImage from '@/resource/images/empty-preview.png';
	import layoutForm from '../../system-components/layout-form/index.vue'; // 组件表单区域

	// 自定义样式
	const css = function() {
		const {
			background_over
		} = this.selected_vdc.config.datas;

		return `
        .advertising-preview.component-${this.id} .main-layout{
            background-color: rgba(0,0,0,${background_over.value/100});
        }
    `;
	};

	export default {
		data() {
			return {
				id: '',
				datas: {},
				emptyImage,
				selected_vdc: {
					id: 'M' + new Date().getTime(),
					component_key: "U000248",
					component_title: "弹窗广告",
					component_tips: "需保存生效，启用后用户进入商城后，广告图将弹出直到用户关闭，可作为品牌宣传使用",
					template_id: 3,
					template_name: "template1",
					template_title: "模版一",
					template_list: [{id: 3, name_en: "template1", name: "模版一", component_key: "U000248"}],
					config: {
						datas: {
							advertising_title: {
								title: "弹窗广告名称",
								type: "text",
								value: "",
							},
							show_rule: {
								title: "显示规则",
								tips: "每日首次登录小程序时显示规则仅在首页和会员中心使用",
								type: "radio",
								value: 1,
								options: [{label: "每次进入页面", value: 1}, {label: "每日首次登录小程序时显示", value: 2}]
							},
							background_over: {
								title: '背景遮罩层透明度',
								type: 'bar',
								value: 0,
								min: 0,
								max: 100,
								no_show_px: true
							},
							advertising_image: {
								title: "广告图",
								type: "image",
								value: ""
							},
							h5_link: {title: "H5页面跳转", type: "link", value: {is_h5: '1', link: '',gh_id: '',minApp_link:''}},
							minApp_link: {title: "小程序页面跳转", show: 'minApp', type: "link", value: {is_minApp: '1', link: '',gh_id: '',minApp_link:''}}
            },
						styles: {},
						layout: [{
							datas: [
								{
									title: "常用配置",
									groups: ["advertising_title", "show_rule", "background_over", "advertising_image", "h5_link", "minApp_link"]
								}
              ],
							styles: []
						}]
					},
					is_loaded_config: true,
					remote_data: {},
					remote_style: {},
				},
			}
		},

		computed: {
			css() {
				return "<style>" + css.call(this) + "</style>";
			},
			className() {
				const name = [`component-${this.id}`];
				return name;
			},
		},
		components: {
			layoutForm
		},
		created() {
			this.id = this.$route.query.id;
			if(this.id) {
				this.getData();
			}
		},
		methods: {
			/**
			 * 获取广告详情
			 * @param {string} top_id 导航ID
			 */
			getData() {
				$http.post("plugin.decorate.admin.decorate-advertising.get-info", { advertising_id: this.id }, "loading").then(response => {
					if (response.result === 1) {
						this.selected_vdc.config.datas.advertising_title.value = response.data.name;
						this.selected_vdc.config.datas.advertising_image.value = response.data.image;
						this.selected_vdc.config.datas.show_rule.value = response.data.show_rule;
						this.selected_vdc.config.datas.h5_link.value.link = response.data.h_url;
						this.selected_vdc.config.datas.h5_link.value.minApp_link = response.data.s_url;
						this.selected_vdc.config.datas.h5_link.value.gh_id = response.data.s_id;
						this.selected_vdc.config.datas.h5_link.value.is_h5 = response.data.url_type.toString();

						this.selected_vdc.config.datas.minApp_link.value.link = response.data.minapp_link;
						this.selected_vdc.config.datas.minApp_link.value.minApp_link = response.data.minapp_link2;
						this.selected_vdc.config.datas.minApp_link.value.gh_id = response.data.minapp_sid;
						this.selected_vdc.config.datas.minApp_link.value.is_minApp = response.data.is_minapp.toString();
            if(response.data.datas) {
	            this.datas = JSON.parse(response.data.datas);
	            this.selected_vdc.config.datas.background_over.value = this.datas.background_over;
            }
					} else {
						if (response.msg) {
							this.$message.error(response.msg);
						}
					}
				}).catch(err => {
					console.log(err);
				});
			},
			handle_save() {
				let that = this;
				let pageinfo = this.handle_data(this.selected_vdc.config.datas);
				if(!pageinfo.advertising_title) {
					this.$message.error('弹窗广告名称不能为空');
					return
				}
				if(!pageinfo.advertising_image) {
					this.$message.error('弹窗广告图片不能为空');
					return
				}
				let datas = {
					background_over: pageinfo.background_over
        };

				let json = {
					id: this.id,
					type: 1,
					name: pageinfo.advertising_title,
					image: pageinfo.advertising_image,
					show_rule: pageinfo.show_rule,
					show_time: 0,
					h_url: pageinfo.h5_link.link,
					s_url: pageinfo.h5_link.minApp_link,
					s_id: pageinfo.h5_link.gh_id,
					url_type: pageinfo.h5_link.is_h5,
					is_minapp: pageinfo.minApp_link.is_minApp,
					minapp_link: pageinfo.minApp_link.link,
					minapp_sid: pageinfo.minApp_link.gh_id,
					minapp_link2: pageinfo.minApp_link.minApp_link,
					is_default: 1,
          datas: JSON.stringify(datas)
				};
				$http.post("plugin.decorate.admin.decorate-advertising.save", json, "loading").then(response => {
					if (response.result === 1) {
						this.$success({
							title: '提示',
							content: '保存成功',
							onOk: function () {
								that.$router.push(that.fun.getUrl("/first_banner"));
							}
						});
					} else {
						if (response.msg) {
							this.$message.error(response.msg);
						}
					}
				}).catch(err => {
					console.log(err);
				});
			},
			/**
			 * 处理数据
			 * @param {String} datas
			 * **/
			handle_data(datas) {
				let handleDatas = {};
				Object.keys(datas).map(key => {
					handleDatas[key] = datas[key].value;
				});
				return handleDatas;
			},
    }
	}
</script>

<style lang="less" scoped>
  .advertising-preview {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 100%;
    padding-top: 95px;
    padding-bottom: 100px;
    overflow-y: scroll;

    // 主要预览布局
    .main-layout {
      position: relative;
      margin: 0 45% 0 auto;
      width: 375px;
      min-height: 667px;
      /*background: #fff;*/
      /*background: rgba(0,0,0,.4);*/
      box-shadow: -10px 20px 30px 0px rgba(192, 197, 205, 0.8);
      // 为空
      &.is-empty {
        .is-empty {
          display: block;
        }
      }
      // 空数据的样式
      .is-empty {
        position: absolute;
        left: 0px;
        top: 270px;
        right: 0px;
        display: none;
        text-align: center;
        color: #C7DCFF;
        font-size: 14px;
        img {
          width: 190px;
          height: 125px;
          margin: 0 auto;
          display: block;
        }
      }
    }

    .page-head{
      width: 100%;
    }

    .pop {
      width: 65%;
      position: absolute;
      z-index: 2;
      left: 50%;
      top: 50%;
      transform: translate(-50%,-50%);
    }
    .pop-image {
      position: relative;
      img {
        width: 100%;
        height: 100%;
      }
    }

    .icon_close {
      top: -13px;
      right: -13px;
      position: absolute;
      background-color: #333;
      width: 25px;
      height: 25px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      color: #fff;
    }

    .fix-class {
      position: fixed;
      top: 95px;
      right: 385px;
      width: 80px;
    }
  }
</style>
